<template>
  <div id="app" ref='pageContainer' :width='wid'>
    <h2 class="point">你好！请切换至移动端浏览</h2>
  <!-- 顶部Header区域 -->
    <mt-header fixed :title="headerTitle" class='ap_header'></mt-header>
    <!-- 中间路由Router-view区域 -->
        <router-view class="Router"></router-view>
    <!-- 底部Tabbar区域 -->
    <nav class="mui-bar mui-bar-tab Tabbar">
      <router-link class="mui-tab-item-wdq" to="/home">
        <span class="mui-icon mui-icon-home"></span><br>
        <span class="mui-tab-label bar-title">首页</span>
      </router-link>
      <router-link class="mui-tab-item-wdq" to="/shop/xptj">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span><br>
        <span class="mui-tab-label bar-title">商城</span>
      </router-link>
      <router-link class="mui-tab-item-wdq" to="/msg">
        <span class="mui-icon mui-icon-email">
        <!-- <span class="mui-badge">9</span> --></span><br>
        <span class="mui-tab-label bar-title">消息</span>
      </router-link>
      <router-link class="mui-tab-item-wdq" to="/person">
        <span class="mui-icon mui-icon-contact"></span><br>
        <span class="mui-tab-label bar-title">我的</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      headerTitle: '数码商城',
      home: '首页',
      infor: '信息',
      shop: '商城',
      person: '我的',
      vid: false,
      wid: document.documentElement.clientWidth
    }
  },
  mounted () {
    this.showVideo()
  },
  updated () {
    this.showVideo()
  },
  methods: {
    showVideo () {
      if (this.wid > 960) {
        this.vid = true
      }
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
/* pc端页面 */
@media screen and (min-device-width:960px) {
  #app{
    position: relative;
    margin: auto;
    width: 90%;
    height: 800px;
  }
  #app *{
    display: none;
  }
  #app>video{
    display: block;
    position: fixed;
    border-radius: 15px;
    box-shadow: 0 0 50px #fab;
    width: 75%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  #app>.point{
    width: 400px;
    height: 50px;
    text-align: center;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -25px -200px;
    color: #fff;
    animation: 6s col infinite;
  }
  @keyframes col{
    25%{ color: #a00;}
    50%{ color: #0aa;}
    75%{ color: #555;}
  }
}
/* 移动端 */
@media screen and (max-device-width:960px) {
  #app{
    width: 95%;
    margin:auto;
    padding: 50px  0px;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    text-align: center;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #app .point,  #app video{
    display: none;
  }
  .ap_header h1{
    font-family: "weiruanyahei";
    font-size: 1rem;
  }
  header{
    background-color: #d82029!important;
  }
  .Tabbar{
    font-size: 0.75rem;
    line-height: 8px;
    background-color:#fefefe;
  }
  .bar-title{
    display:block;
    margin-top: -7px;
  }
  .router-link-active{
   color: #a44 !important;
   font-weight: 600;
  }
  /* 修改类mui-tab-item的类名为mui-tab-item-wdq,解决底部导航栏无法点击切换问题 */
  .mui-bar-tab .mui-tab-item-wdq {
      display: table-cell;
      overflow: hidden;
      width: 1%;
      height: 1;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #929292;
  }
}
</style>
